import React from 'react'
import './Login.scss'
import { Card, Form, Input, Button, Checkbox, message } from 'antd';
import { useNavigate } from 'react-router-dom'

export default function Login() {
    const ruleFrom = React.createRef()
    const navigate = useNavigate()
    const onFinish = (values) => {
        let { username, password } = values
        if (username === 'admin' && password === 'admin') {
            localStorage.setItem("login", true)
            navigate('/home')
            message.success('登录成功！')
        } else {
            ruleFrom.current.resetFields()
            message.error('用户名或密码错误！')
        }
    }
    return (
        <div className='bgc'>
            <div className='form_class'>
                <Card
                    bordered='false'
                    headStyle={{ textAlign: 'center', fontSize: '20px' }}
                    hoverable
                    title="登录">
                    <Form
                        ref={ruleFrom}
                        name="basic"
                        labelCol={{ span: 4 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="用户名"
                            name="username"
                            rules={[{ required: true, message: '请输入用户名' }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[{ required: true, message: '请输入密码' }]}
                        >
                            <Input.Password />
                        </Form.Item>
                        <Form.Item name="remember" wrapperCol={{ offset: 4 }} valuePropName="checked">
                            <Checkbox>Remember me</Checkbox>
                        </Form.Item>
                        <Form.Item wrapperCol={{ offset: 10 }}>
                            <Button type="primary" htmlType="submit">
                                Submit
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>
            </div>
        </div>
    )
}
